<template>
  <div class="about">
    <div style=" width: 60%;margin: 20px auto;position: relative;">
      <el-dropdown @command="handleCommand" style="position: absolute;z-index: 100;">
        <el-button plain>
          {{ content }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(o, index) in item" :key="index" :command="o.name">
            {{ o.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-form :model="formInline" class="demo-form-inline" style="display: contents;" v-on:submit.prevent.native>
        <el-form-item>
          <el-input style="width: 740px;margin-left: 90px;" v-model="formInline.user" @keyup.enter.native="handleEnter"
            placeholder="搜索内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="position: absolute;top: -63px;right: 0px;width: 70px;" type="primary"
            v-on:click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="width:60%;margin-left:20%;">
      <el-table v-loading="loading" :data="tableData" style="width: 100%;">
        <el-table-column prop="name" label="歌名" width="300">
        </el-table-column>
        <el-table-column prop="singerName" label="歌手" width="300">
        </el-table-column>
        <el-table-column prop="musicId" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" circle plain @click="play(scope.row.musicId)"><i class="el-icon-video-play"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination @current-change="handlePageChange" @size-change="handlePageSizeChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" :total="total"
        layout="total,prev, pager, next, jumper,sizes"></el-pagination>
    </div>

  </div>
</template>

<script>
import manageApi from '@/api/manageApi';
import dataApi from '@/api/dataApi';
export default {
  name: 'SortView',
  data() {
    return {
      formInline: {
        user: null,
      },
      item: [
        {
          name: "歌曲",
        },
        {
          name: "歌手",
        }
      ],
      content: "歌曲",
      currentPage: 1, // 当前页码
      pageSize: 10,   // 每页显示的数据量
      pageSizes: [10, 20, 30, 40], //分页
      total: 0,        // 总数据量
      tableData: [],
      loading:false,
      
    }
  },
  created() {
    this.setPageTitle();
  },
  methods: {
    setPageTitle() {
      document.title = this.$route.meta.title || 'My App';
    },
    search() {
      this.loading = true;
      if(this.formInline.user!=null){
        if (this.content === "歌手") {       //搜索歌手
        manageApi.getSingerRegex({
          singerName: this.formInline.user,  //查询的内容
          page: this.currentPage - 1,  //查询的页数
          size: this.pageSize,  //查询的条数
        }).then(response => {
          this.tableData = response.data.content;   //将结果赋给表单
          this.total = response.data.totalElements; //获得总条数
          console.log(this.tableData.length);
          if (this.tableData.length === 0) {
            this.$message({
              message: '没有该歌手',
              type: 'warning'
            });
            this.loading = false;
          } else {
            this.$message({
              message: '查询成功',
              type: 'success'
            });
            this.loading = false;
          }
        })

      } else if (this.content === "歌曲") {  //搜索歌曲
        manageApi.getSongRegex({
          songName: this.formInline.user,  //查询的内容
          page: this.currentPage - 1,  //查询的页数
          size: this.pageSize,  //查询的条数
        }).then(response => {
          this.tableData = response.data.content;   //将结果赋给表单
          this.total = response.data.totalElements; //获得总条数
          if (this.tableData.length === 0) {
            this.$message({
              message: '没有该歌曲',
              type: 'warning'
            });
            this.loading = false;
          } else {
            this.$message({
              message: '查询成功',
              type: 'success'
            });
            this.loading = false;
          }
        })
      }
      }else{
        //获得所有歌曲分页
        dataApi.songData({
                params: {
                    page: this.currentPage - 1,
                    size: this.pageSize,
                }
            }).then(response => {
                this.tableData = response.content;
                this.total = response.totalElements;
                this.loading = false;
        })
      }
    },
    onSubmit() {   //查询按钮点击时触发
      this.search();
    },
    handleEnter() {   //按下回车时触发
      this.search();
    },
    handleCommand(command) {
      this.content = command;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.getData(); // 切换页码时重新获取数据
    },
    //更换页面条数时执行
    handlePageSizeChange(pagesize) {
      this.pageSize = pagesize;
      this.getData();
    },
    play(id){
      this.$emit('childClick',id);
    }
  },
  mounted() {
    this.search();
  },
}
</script>
  